<template>
	<view>
		<view class="fixed-box u-flex u-flex-around">
			<view class="m-flex-y u-flex-items-center u-flex-1 u-p-t-12 " v-for="(item, index) in list" :key="index" :class="current == index ? 'm-c-g' : 'm-c-97'" @click="tab(index)">
				<view class="u-rela">
					<u-badge v-if="index==3" :isDot="laixin" type="error" :offset="[0, 3]" absolute></u-badge>
					<u-icon size="24" :name="current == index ? item.selectedIconPath : item.iconPath"></u-icon>
				</view>
				<view class="u-font-20 u-m-t-6">{{ item.text }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'tabbar',
	data() {
		return {
			laixin: uni.getStorageSync('xinxiaoxi'),
			list: [
				{
					pagePath: '/pages/tabbar/index',
					iconPath: '/static/tabbar/home-off.png',
					selectedIconPath: '/static/tabbar/home-on.png',
					text: '首页'
				},
				{
					pagePath: '/pages/tabbar/consult',
					iconPath: '/static/tabbar/cart-off.png',
					selectedIconPath: '/static/tabbar/cart-on.png',
					text: '资讯'
				},
				{
					pagePath: '/pages/tabbar/recommend',
					iconPath: '/static/tabbar/coupon-off.png',
					selectedIconPath: '/static/tabbar/coupon-on.png',
					text: '推荐'
				},
				{
					pagePath: '/pages/tabbar/news',
					iconPath: '/static/tabbar/fl-off.png',
					selectedIconPath: '/static/tabbar/fl-on.png',
					text: '消息'
				},
				{
					pagePath: '/pages/tabbar/mine',
					iconPath: '/static/tabbar/my-off.png',
					selectedIconPath: '/static/tabbar/my-on.png',
					text: '我的'
				}
			]
		};
	},
	props: {
		current: {
			type: Number,
			default: 0
		}
	},
	created() {
		let that = this;
		that.$ry.watch({
			message(event) {
				// 新接收到的消息内容
				const message = event.message;
				// 只接受单聊消息
				if (message.type != 1) return;
				that.laixin = true;
			}
		});
	},
	methods: {
		async tab(index) {
			if (index === 1 || index === 4) {
				let login = await this.getMobile('sub');
				if (!login) {
					return;
				}
			}
			this.nextNav(this.list[index].pagePath);
		}
	}
};
</script>

<style lang="scss">
.m-c-97 {
	color: #979797;
}
</style>
